<template>
  <view class="mask" :class= "mask == 'true' || mask == true ? 'mask-show' : ''" @click="Mclose" v-if="show" @touchmove.stop.prevent="preventTouchMove">
		<!-- 加载动画开始 -->    <!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
		<view class="loadEffect">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</view>
		<!-- 加载动画结束 -->
		<view class="title">{{text}}</view>
  </view>
  <!-- 遮罩层-->
</template>

<script scoped="true">
export default {
  name: "w-loading",
	props:{
		text: String,
		mask: Boolean | String,
		click: Boolean | String,
	},
  data() {
    return {
			show: false
		};
  },
	methods:{
		preventTouchMove(){
			console.log('stop user scroll it!');
			return;
		},
		Mclose(){
			if(this.click == 'false' || this.click == false){
				this.show = false
			}
		},
		open(){
			this.show = true
    },
    close(){
      this.show = false
    }
	}
};
</script>

<style>
.mask {
  /* pointer-events: none; */
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
	flex-direction:column;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
}
.mask.mask-show{
	background: rgba(7, 17, 27, .3);
}
.title{
	color: #fff;
	font-size: 28upx;
}





/* loading加载动画的css */
.loadEffect{
    width: 100rpx;
    height: 100rpx;
    position: relative;
    margin: 20rpx auto;
    margin-top:100rpx;
}
.loadEffect span{
    display: inline-block;
    width: 30rpx;
    height: 10rpx;
    border-top-left-radius: 5rpx;
    border-bottom-left-radius: 5rpx;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-5rpx;
    -webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
    left: 10rpx;
    top: 20rpx;
    -webkit-transform: rotate(45deg);
    -webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
    left: 50%;
    top: 10rpx;
    margin-left: -15rpx;
    -webkit-transform: rotate(90deg);
    -webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
    top: 20rpx;
    right:10rpx;
    -webkit-transform: rotate(135deg);
    -webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-5rpx;
    -webkit-transform: rotate(180deg);
    -webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
    right: 10rpx;
    bottom:20rpx;
    -webkit-transform: rotate(225deg);
    -webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
    bottom: 10rpx;
    left: 50%;
    margin-left: -15rpx;
    -webkit-transform: rotate(270deg);
    -webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
    bottom: 20rpx;
    left: 10rpx;
    -webkit-transform: rotate(315deg);
    -webkit-animation-delay:1.04s;
}
</style>
